<!-- subpkg_archive/form/index.vue -->
<script setup lang="ts">
  import { addPatientApi, patientDetailApi, updatePatientApi } from '@/apis/patient'
  import type { PatientItem } from '@/types/patient'
  import { ref } from 'vue'

  // 1. 定义表单数据
  const formData = ref<PatientItem>({
    name: '',
    idCard: '',
    defaultFlag: 1, // 0-不是默认患者  1-是默认患者
    gender: 0, // 0-女 1-男
  })

  const onSwitchChange = (e: UniHelper.SwitchOnChangeEvent) => {
    // console.log(e.detail.value)
    formData.value.defaultFlag = e.detail.value ? 1 : 0
  }

  // 2.表单验证规则
  const formRules = {
    name: {
      rules: [
        { required: true, errorMessage: '请填写患者姓名' },
        {
          pattern: '^[\u4e00-\u9fa5]{2,5}$',
          errorMessage: '患者姓名为2-5位中文',
        },
      ],
    },
    idCard: {
      rules: [
        { required: true, errorMessage: '请输入身份证号' },
        {
          pattern:
            '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
          errorMessage: '身份证号格式不正确',
        },
      ],
    },
    gender: {
      rules: [
        { required: true, errorMessage: '请勾选患者姓名' },
        {
          // @ts-ignore
          validateFunction: function (rule, value, data, callback) {
            // 校验身份证的第二位是偶数-女 奇数-男
            // % -----余
            if (data.idCard.slice(16, 17) % 2 !== value) {
              callback('身份证性别不一致')
            }
            return true
          },
        },
      ],
    },
  }

  // 3. 保存患者信息
  const formRef = ref()
  const onSubmit = async () => {
    // 3.1 校验
    const res = await formRef.value.validate()
    // console.log(res)
    // 3.2 调用接口
    if (formData.value.id) {
      // 编辑
      const { name, idCard, defaultFlag, id, gender } = formData.value
      await updatePatientApi({ name, idCard, defaultFlag, id, gender })
    } else {
      // 添加
      await addPatientApi(res)
    }
    uni.showToast({ title: `${formData.value.id ? '编辑' : '添加'}成功`, icon: 'success' })
    // 3.3 回到上一个页面
    uni.navigateBack()
  }

  // 4. 获取患者详情
  const props = defineProps<{ id: string }>()
  const getPatientDetail = async () => {
    // 4.1 id必须有值
    if (!props.id) return

    // 4.2 修改导航栏标题
    uni.setNavigationBarTitle({ title: '编辑患者' })

    // 进行回显
    const res = await patientDetailApi(props.id)
    formData.value = res
  }
  getPatientDetail()
</script>

<template>
  <scroll-page>
    <view class="archive-page">
      <uni-forms border label-width="220rpx" ref="formRef" :model="formData" :rules="formRules">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            v-model="formData.name"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            v-model="formData.idCard"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            v-model="formData.gender"
            selectedColor="#16C2A3"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
            <switch
              :checked="Boolean(formData.defaultFlag)"
              color="#20c6b2"
              style="transform: scale(0.7)"
              @change="onSwitchChange"
            />
          </view>
        </uni-forms-item>
        <button class="uni-button" @click="onSubmit">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './index.scss';
</style>
